<template>
  <div>
  <details open v-for=" (item, index) in list" :key="index">
    <summary>{{ item.name }} </summary>
    <ol>
      <li v-for="page in data_page[item.node_id]" :key="page[0]">
        <a :href="page[2]">{{page[1]}}</a>
      </li>
    </ol>
    <treeMenu v-bind:list="item['children']" :data_page="data_page"></treeMenu>
  </details>
  </div>
</template>
<script>
import "@/assets/css/menu_link.css";
export default {
  name: "treeMenu",
  props: {
    list:Array,
    data_page:Object
  },
  data() {
    return {};
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped>
div{
  min-width: 100px;
  text-align: left;
}
details details{
  display: block;
  padding-left: 20px;
}
ol{
  text-align: left;
  padding-left: 15%;
}
ol>li{
  padding-left: initial;
  /* text-indent: -20%; */
}
</style>